<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件 -->
		<script src="../js/other.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background-color: #DCDCDC;">
		<div id="app">
			<van-row style="height: 80px;background-color: #FF0000;">

				<van-search placeholder="请输入搜索关键词" background="red" style="padding-top: 20px;" show-action shape="round">
					<div slot="action">
						<van-icon size="30px" name="chat-o" style="padding-top: 10px;" color="white" />
					</div>
				</van-search>

			</van-row>
			<van-row>
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(item,index) in d">
						<img :src="item.ImageUrl" width="100%" alt="">
					</van-swipe-item>

				</van-swipe>
			</van-row>
			<van-row style="height: 100px;background-color: white; border-radius: 15px;	margin-top: 5px;">
				<van-col style="margin: 20px; height: 50px;text-align: center;">
					<van-button type="primary" style="border-radius: 10px; width: 50px;background-color: #BE0DFA;" >酒</van-button>
					<p style="margin-top: -1px;">酒水饮料</p>
				</van-col>
				<van-col style="margin: 20px auto 20px auto; height: 50px;text-align: center;">
					<van-button type="primary" style="border-radius: 10px; width: 50px;background-color: #F7368E;">酒</van-button>
					<p style="margin-top: -1px;">厨房用品</p>
				</van-col>
			</van-row>
			<van-row style="margin: 5px auto;">
				<div style="width: 95%; height: 40px; background-color: white;margin-left: 9px;
				border-radius: 50px;">
					<span style="float: left; margin-left: 10px; margin-top: 8px;">
						<span style="color: red;">
							资讯
						</span>
						<span style="color: #D6D6D6;">
							|
						</span>
					</span>

					<span>
						<van-swipe :autoplay="3000" vertical style="height: 20px; width: 240px; padding-top: 10px;" :show-indicators=false>
							<van-swipe-item v-for="i in f">{{i.Title}}</van-swipe-item>

						</van-swipe>
					</span>
					<span style="float: right; margin-top: -20px;">
						<span style="color: #D6D6D6;">
							|
						</span>
						<span>
							更多
						</span>
					</span>

				</div>
			</van-row>
			<van-row style="background-color: white;height: 50px;line-height: 45px;">
				<span style="font-size: 20px;color: red;">
					|
				</span>
				<span>
					热门推荐
				</span>
			</van-row>
			<van-row style="background-color: white;">
				<van-row style="width: 120px; font-size: 14px;">
					<van-col>
						<img :src="g[8].GoodsImageUrl.src" width="120px" height="120px">
					</van-col>
					<van-col v-for = "i in j">
						{{i.Name}}
					</van-col>
					<van-col style="color: red;margin: 10px auto;">
						￥ 0.01
					</van-col>
				</van-row>
			</van-row>

			<van-row style="background-color: white;margin: 5px auto;height: 30px;line-height: 25px;">
				<van-col>
					|
				</van-col>
				<van-col>
					商品列表
				</van-col>
			</van-row>
			<van-row v-for="(i,index) in g">
				<van-card style="height: 130px;" tag="hot" :price="i.RealPrice" :title="i.Name" :thumb="g[0].GoodsImageUrl.src"
				 :origin-price="i.MarketPrice">
					<div slot="footer" style="float: left;margin: 0px;">
						累计销量{{i.VirtualSaleCount}}
					</div>
					<div slot="footer" style="float: right;margin: -5px;">
						{{i.BrowseCount}}浏览
					</div>
				</van-card>
			</van-row>
		</div>
		<!-- <script type="text/javascript">
			function plusReady(){
			}
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener('plusready', plusReady, false);
				console.log(plusReady);
			}
			
			// 创建并显示新窗口
			function create(){
				var w = plus.webview.create('../font/submitbar.html');
				w.show(); // 
				
			}
			
			
		</script> -->
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					d: [],
					f: [],
					g: [],
					j:[]
				},
				methods:{
					getone:function(){
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							"success": function(res) {
								vm.d = res.Data.CarouselFigureList;
								vm.f = res.Data.InformationList;
								vm.j = res.Data.GoodsRecommendList;
								console.log(res)
							}
						
						})
					},
					gettwo:function(){
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							data: {
								
								p: 1
							},
							"success": function(res) {
								vm.g = res.Data;
								console.log(res)
							}
						})
					}
				},
				created:function(){
					document.addEventListener('plusready',function(){
					})
				},
				methods:{
					getone:function(){
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							"success": function(res) {
								vm.d = res.Data.CarouselFigureList;
								vm.f = res.Data.InformationList;
								vm.j = res.Data.GoodsRecommendList;
								console.log(res)
							}
						
						})
					},
					gettwo:function(){
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							"success": function(res) {
								vm.g = res.Data;
							}
						})
					}
					
				},
				mounted() {
					this.getone();
					this.gettwo();
				}
			})
		</script>
	</body>
</html>
